﻿<div id="dictionary" class="mdl-grid">
    <div class="p-section">
        <!-- tabs item -->
        <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
            <div class="mdl-tabs__tab-bar">
                <a href="#normal" class="mdl-tabs__tab is-active">普通字典</a>
                <a href="#system" class="mdl-tabs__tab">系统字典</a>
            </div>

            <!-- 普通字典 -->
            <div class="mdl-tabs__panel is-active" id="normal">
                <div class="mdl-grid">
                    <div class="mdl-cell mdl-cell--4-col">
                        <div id='jqxWidget'></div>
                    </div>
                    <div class="mdl-cell mdl-cell--8-col">
                        <div class="table-bar">
                            <a href="javascript:void(0)" id="dnyAddBtn" class="button button-small button-primary">添加</a>
                            <a href="javascript:void(0)" id="dnyEditBtn" class="button button-small button-royal">编辑</a>
                            <a href="javascript:void(0)" id="dnyDeleBtn" class="button button-small button-caution ">删除</a>
                            <a href="javascript:void(0)" id="dnySaveBtn" class="button button-small button-action">保存</a>
                        </div>
                        <div id="treeGrid"></div>
                    </div>
                </div>
            </div>
            <!-- 系统字典 -->
            <div class="mdl-tabs__panel" id="system">
                <!--
                   系统字典 ^
                -->
                系统字典
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        componentHandler.upgradeAllRegistered()  // 因为路由引入页面的关系，需要重注册material框架的事件

        /**
         * jquery TreeGrid  ====================================
         * @type { plugin  }
         */
        var treeGrid = $('#treeGrid')
        var employees = [
            { "ReportsTo": 2, "EmployeeID": 1, "FirstName": "Nancy", "Title": "Sales Representative", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
            { "ReportsTo": null, "EmployeeID": 2, "FirstName": "Andrew", "Title": "Vice President, Sales", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way" },
            { "ReportsTo": 2, "EmployeeID": 3, "FirstName": "Janet", "Title": "Sales Representative", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
            { "ReportsTo": 2, "EmployeeID": 4, "FirstName": "Margaret", "Title": "Sales Representative", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
            { "ReportsTo": 9, "EmployeeID": 5, "FirstName": "Steven", "Title": "Sales Manager", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill" },
            { "ReportsTo": 9, "EmployeeID": 6, "FirstName": "Michael", "Title": "Sales Representative", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
            { "ReportsTo": 9, "EmployeeID": 7, "FirstName": "Robert", "Title": "Sales Representative", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
            { "ReportsTo": 9, "EmployeeID": 8, "FirstName": "Laura", "Title": "Inside Sales Coordinator", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
            { "ReportsTo": null, "EmployeeID": 9, "FirstName": "Anne", "Title": "Sales Representative", "BirthDate": "1966-01-27 00:00:00", "Address": "7 Houndstooth Rd." }
        ]

        var source ={
            dataType: "json",
            dataFields: [
                { name: 'EmployeeID', type: 'number' },
                { name: 'ReportsTo', type: 'number' },
                { name: 'FirstName', type: 'string' },
                { name: 'City', type: 'string' },
                { name: 'Address', type: 'string' },
                { name: 'Title', type: 'string' },
                { name: 'BirthDate', type: 'date' }
            ],
            hierarchy: {
                keyDataField: { name: 'EmployeeID' },
                parentDataField: { name: 'ReportsTo' }
            },
            id: 'EmployeeID',
            localData: employees,
            addRow: function (rowID, rowData, position, parentID, commit) {
                commit(true)
                newRowID = rowID
            },
            updateRow: function (rowID, rowData, commit) {
                commit(true)
            },
            deleteRow: function (rowID, commit) {
                commit(true)
            }
        }

        var dataAdapter = new $.jqx.dataAdapter(source)

        treeGrid.jqxTreeGrid({
            width: '100%',
            source: dataAdapter,
            sortable: true,
            scrollBarSize: 5,
            editable: true,
            theme: 'metro',
            ready: function () {
                treeGrid.jqxTreeGrid('expandRow', '2');
            },
            columns: [
                { text: 'FirstName', dataField: 'FirstName' },
                { text: 'Title', dataField: 'Title' },
                { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd'  },
                { text: 'Address', dataField: 'Address' },
                { text: 'City', dataField: 'City' },
            ]
        })

        var addBtn = $('#add')
        var deleBtn = $('#dele')
        var rowKey = null;

        treeGrid.on('rowSelect', function (event) {
            var args = event.args
            rowKey = args.key
        });
        addBtn.on('click', function () {
            alert('adding...')
            if(rowKey){
                treeGrid.jqxTreeGrid('expandRow', rowKey)
                treeGrid.jqxTreeGrid('addRow', null, {}, 'first', rowKey)
                treeGrid.jqxTreeGrid('clearSelection')
                treeGrid.jqxTreeGrid('selectRow', newRowID)
                treeGrid.jqxTreeGrid('beginRowEdit', newRowID)
            }
        })

        deleBtn.on('click', function () {
            alert('deling...')
            var selection = treeGrid.jqxTreeGrid('getSelection');
            if (selection.length > 1) {
                var keys = new Array();
                for (var i = 0; i < selection.length; i++) {
                    keys.push(treeGrid.jqxTreeGrid('getKey', selection[i]));
                }
                treeGrid.jqxTreeGrid('deleteRow', keys);
            }
            else {
                treeGrid.jqxTreeGrid('deleteRow', rowKey);
            }
        })

        /**
         * jquery Tree ====================================
         * @type { plugin  }
         */
        var source = [
            {
                icon: '/avBackend/src/images/administrator.png', label: "Item 1", items: [
                  { icon: '/avBackend/src/images/person.png', label: "Item 1.1" },
                  { icon: '/avBackend/src/images/person.png', label: "Item 1.2" }
                ]
            },
            { icon: '/avBackend/src/images/administrator.png', label: "Item 2" },
            { icon: '/avBackend/src/images/administrator.png', label: "Item 3" },
            {
                icon: '/avBackend/src/images/administrator.png', label: "Item 4", items: [
                  { icon: '/avBackend/src/images/person.png', label: "Item 4.1" },
                  { icon: '/avBackend/src/images/person.png', label: "Item 4.2" }
                ]
            },
            { icon: '/avBackend/src/images/administrator.png', label: "Item 5" },
            { icon: '/avBackend/src/images/administrator.png', label: "Item 6" },
            { icon: '/avBackend/src/images/administrator.png', label: "Item 7" }
        ]

        $('#jqxWidget').jqxTree({
            theme: 'metro',
            source: source,
            width: '100%',
            toggleIndicatorSize: 25
        })

    })
</script>